<template>
  <div class="container-directorys">
    <el-card>
      <!-- 从学科跳过来面包屑 -->
      <el-breadcrumb v-if="subjectID" slot="header" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>
          {{ subjectName }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 筛选 -->
      <el-row type="flex" justify="space-between" style="">
        <el-col :span="18">
          <el-form :inline="true" justify="end" size="small">
            <el-form-item label="目录名称">
              <el-input v-model="reqData.directoryName" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="reqData.state" placeholder="请选择">
                <el-option
                  v-for="(item,index) in status"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-button v-if="subjectID" type="text" icon="el-icon-back">
              <el-link type="primary" :underline="false" @click="$router.push({path: 'list'})">返回学科</el-link>
            </el-button>
            <el-button 
              justify="end" 
              icon="el-icon-edit" 
              size="small" 
              type="success" 
              @click="dialogVisible = true"
            >新增目录</el-button>
          </el-row>
        </el-col>       
      </el-row>
      <!-- 总计 -->
      <el-alert
        :title="`数据一共${reqData.total}条`"
        type="info"
        show-icon
        :closable="false"
      />
      <!-- 表格 -->
      <el-table :data="directorys" style="width:100%">
        <el-table-column type="index" label="序号" width="80px" />
        <el-table-column label="所属学科" prop="subjectName" />
        <el-table-column label="目录名称" prop="directoryName" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="创建日期" prop="addDate">
          <template slot-scope="{row}">
            {{ row.addDate|parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals" />
        <el-table-column label="状态" prop="state" :formatter="formatState" />

        <!-- <el-table-column label="状态" prop="state">
          <template v-slot="{row}">
            {{ row.state===1? '已启用' : '已禁用' }}
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="150px">
          <template slot-scope="{ row }">
            <el-row justify="space-between" type="flex">    
              <el-button type="text" @click="changeState(row)">
                <template>
                  {{ row.state===1? '禁用' : '启用' }}
                </template>
              </el-button>
              <el-button type="text" :disabled="row.state===0" @click="editDirectory(row)">修改</el-button>           
              <el-button type="text" :disabled="row.state===0" @click="delDirectory(row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end" align="middle" style="margin-top: 20px">       
        <el-pagination
          background
          :page-size="reqData.pageszie"
          :current-page="reqData.page"
          :total="reqData.total"
          :page-sizes="[5,10,20,50]"
          layout="prev, pager, next, sizes, jumper"
          @current-change="changePage"
          @size-change="changePageSize"
        />
      </el-row>

      <!-- 放置新增弹层 -->
      <el-dialog
       
        :title="showTitle"
        :visible.sync="dialogVisible"
        width="400px"
        @close="btnCancel"
      >
        <el-form ref="addForm" v-loading="loading" :model="formData" label-width="80px" :rules="rules">
          <el-form-item v-if="!subjectID" label="所属学科" prop="subjectID">
            <el-select v-model="formData.subjectID" style="width:90%" placeholder="请选择">
              <el-option
                v-for="(item, index) in subjectList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-model="formData.directoryName" type="text" style="width:90%" placeholder="请输入目录名称" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="btnCancel">取 消</el-button>
          <el-button type="primary" @click="btnOK">确 定</el-button>
        </span>
      </el-dialog>

      
    </el-card>
  </div>
</template>

<script>
import { list as directorysList, remove as delDirectory, add as addDirectory, update as updateDirectory, changeState} from '@/api/hmmm/directorys.js'
import {simple as subjectList} from '@/api/hmmm/subjects.js'
import {status} from '@/api/hmmm/constants.js'
export default {
  name: 'Directory',
  data () {
    return {
      reqData: {
        directoryName: null,
        //目录筛选
        page: 1, // 当前页码
        pagesize: 10, // 每页条数
        total: 0
      },  
      directorys: [], //接受数据，渲染表格
      dialogVisible: false,
      rules: {
        directoryName: [{required: true, message: '目录名称不能为空', trigger: 'blur'}]
      },
      status,
      formData: {}, //绑定弹窗
      subjectList: [], //简单学科目录
      loading: false,
      subjectID: this.$route.query.subjectID,
      subjectName: this.$route.query.subjectName
    }
  },
  computed: {
    showTitle(){
      return this.formData.id?'修改目录':'新增目录'
    }
  },
  created () {
    this.getDirectorys()  
    this.getSubjectSimpleList()  
  },
  methods: {
    //分页
    changePage(newPage){
      this.reqData.page = newPage
      this.getDirectorys()
    },
    changePageSize(newSize){
      this.reqData.page = 1
      this.reqData.pagesize=newSize
      this.getDirectorys()
    },
    //格式化状态
    formatState(row, column, cellValue){
      return cellValue===1? '已启用':'已禁用'
    },
    //获取目录列表
    async getDirectorys(){
      const {data} = await directorysList({...this.reqData, subjectID: this.subjectID})
      // console.log(data);
      this.directorys=data.items
      this.reqData.total=data.counts
    },
    //获取学科列表
    async getSubjectSimpleList(){
      const {data} = await subjectList()
      // console.log(data);
      this.subjectList=data
    },
    //删除
    async delDirectory(id){
      // console.log(id);
      try {
        await this.$confirm('此操作将永久删除该目录，是否继续？')
        await delDirectory({id})
        this.getDirectorys()
        this.$message.success('删除成功')
      } catch (error){
        console.log(error);
      }
    },
    //数据回显
    editDirectory(row){
      // console.log(row);
      this.formData={...row}
      this.dialogVisible=true
    },
    //状态的禁止与启用
    async  changeState(row){
      // console.log(row.state);
      row.state===1?(row.state=0):(row.state=1)
      await changeState(row)
    },
    //搜索
    search(){
      // 数据绑定
      this.reqData.page = 1
      this.getDirectorys()

    },
    clear(){
      this.reqData.directoryName=null
      this.reqData.state=null
    },
    //弹窗
    btnCancel(){
      this.formData={
        subjectID: '',
        directoryName: ''
      }
      this.$refs.addForm.resetFields()
      this.dialogVisible = false
     
    },
    //新增
    async btnOK(){ 
      try {
        await this.$refs.addForm.validate()
        //区分是从学科进来的还是目录进来的有无学科ID
        this.loading= true
        if (this.formData.id){
          await  updateDirectory({ subjectID: this.subjectID, ...this.formData} ) 
          this.$message.success('修改目录成功')
        } else {
          await addDirectory({subjectID: this.subjectID, ...this.formData })
         
          this.$message.success('新增目录成功')
        }
        this.getDirectorys()
        this.loading= false
        this.dialogVisible = false
      } catch (error){
        console.log(error);
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container-directorys{
  padding:10px 15px
  
}

</style>
